<template>
  <view>
    <cm-nav back>
      <template v-slot:center>应用购买</template>
    </cm-nav>
    
    <swiper :style="[headerStyle]" circular autoplay indicator-dots>
      <swiper-item>
        <cm-img width="100%" height="100%" src="/static/images/buy_head_1.png"></cm-img>
      </swiper-item>
      <swiper-item>
        <cm-img width="100%" height="100%" src="/static/images/buy_head_2.png"></cm-img>
      </swiper-item>
    </swiper>
    
    <cm-card cm-class="cm-margin-top-10" :is-shadow="false">
      <view class="cm-padding-10">
        <view v-if="endStr === 'hasnt' || endStr === 'timeout'">尚未解锁进阶功能，或已经过期</view>
        <view v-else>
          <text>进阶功能有效期至：</text>
          <text class="app-color-red" v-if="endStr === durationList[2]">永久</text>
          <text class="app-color-red" v-else>{{ endStr }}</text>
        </view>
      </view>
    </cm-card>
    <cm-card cm-class="cm-margin-top-10">
      <view class="cm-flex cm-flex-j-between">
        <view class="cm-flex">
          <view class="buy-type-text app-border-color_ex-right">免费试用</view>
          <view class="buy-content cm-flex-as-center cm-padding-10">
            <view>{{ descriptionList[0] }}</view>
            <view class="app-alert-color cm-bold cm-margin-top-10">￥ {{ priceList[0].toFixed(1) }}</view>
          </view>          
        </view>
        <view class="cm-flex-as-center cm-flex-s-0 cm-padding-10">
          <cm-button type="primary" @click="buyHandler(0)">试用</cm-button>
        </view>
      </view>      
    </cm-card>
    <cm-card cm-class="cm-margin-top-10">
      <view class="cm-flex cm-flex-j-between">
        <view class="cm-flex">
          <view class="buy-type-text app-border-color_ex-right">包月使用</view>
          <view class="buy-content cm-flex-as-center cm-padding-10">
            <view>{{ descriptionList[1] }}</view>
            <view class="app-alert-color cm-bold cm-margin-top-10">￥ {{ monthBuyPrice }}</view>
            <view class="cm-flex cm-flex-a-center cm-margin-top-10">
              <cm-input type="number" v-model="monthNum" border></cm-input>
              <text class="cm-flex-s-0 cm-margin-left-10">个月</text>
            </view>
          </view>          
        </view>
        <view class="cm-flex-as-center cm-flex-s-0 cm-padding-10">
          <cm-button :disabled="fixedMonthNum === 0" type="primary" @click="buyHandler(1)">购买</cm-button>
        </view>
      </view>      
    </cm-card>
    <cm-card cm-class="cm-margin-top-10">
      <view class="cm-flex cm-flex-j-between">
        <view class="cm-flex">
          <view class="buy-type-text app-border-color_ex-right">永久解锁</view>
          <view class="buy-content cm-flex-as-center cm-padding-10">
            <view>{{ descriptionList[2] }}</view>
            <view class="app-alert-color cm-bold cm-margin-top-10">￥ {{ priceList[2].toFixed(1) }}</view>
          </view>          
        </view>
        <view class="cm-flex-as-center cm-flex-s-0 cm-padding-10">
          <cm-button type="primary" @click="buyHandler(2)">购买</cm-button>
        </view>
      </view>      
    </cm-card>
    
    <cm-card cm-class="cm-margin-top-10 cm-text-12 cm-text-center" :is-shadow="false">
      <view class="cm-bold app-theme-color cm-text-16" style="padding: 10px 10px 0 10px;">您的支持，能够帮助我们更好地完善应用。</view>
      <view class="cm-bold cm-text-16 cm-margin-top-10">购买遇到任何问题，请联系：</view>
      <view class="cm-bold cm-text-16 cm-margin-top-10">13269616293(微信同号)</view>
      <cm-divider>
        <view class="cm-bold cm-text-18">功能对比</view>
      </cm-divider>
      <cm-label-text label-width="120" border-split border-top border-bottom content-no-padding>
        <view class="cm-flex">
          <view class="cm-w-50 app-border-color_ex-right cm-padding-10">免费功能</view>
          <view class="cm-w-50 cm-padding-10">进阶功能</view>
        </view>
      </cm-label-text>
      <cm-label-text v-for="(item, index) in funcList" :key="index"
        :label="item[0]" label-width="120" border-split border-bottom content-no-padding>
        <view class="cm-flex">
          <view class="cm-w-50 app-border-color_ex-right cm-padding-10">{{ item[1] ? '√' : '×' }}</view>
          <view class="cm-w-50 cm-padding-10">{{ item[2] ? '√' : '×' }}</view>
        </view>
      </cm-label-text>
    </cm-card>
  </view>
</template>

<script src="./buy.js"></script>

<style lang="stylus">
@import './buy.styl'
</style>
